<template>
  <div class="hello">
    <!-- <el-row class="tac s">
      <el-col :span="12">
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          text-color="#fff"
          active-text-color="#ffd04b"
          style="height: 585px;background:rgb(44,44,49);"
        >
          <div class="demo-image">
            <div class="block" :key="fit">
              <el-image
                style="width: 60px; height: 60px;margin-top:45px;margin-left:8px;"
                :src="url"
                :fit="fit"
              ></el-image>
            </div>
          </div>
          <el-menu-item index="2">
            <i class="iconfont icon-gongzuotai"></i>
            <span style="position: relative; left: 6px">工作台</span>
          </el-menu-item>
          <el-menu-item index="3">
            <i class="el-icon-star-on" style="font-size: 25px"></i>
            <span slot="title">收藏夹</span>
          </el-menu-item>
          <el-menu-item index="4">
            <i class="el-icon-lock"></i>
            <span slot="title">已锁定</span>
          </el-menu-item>
          <el-menu-item index="5">
            <i class="iconfont icon-huishouzhan1" style="font-size: 22px"></i>
            <span slot="title" style="position: relative; left: 6px"
              >回收站</span
            >
          </el-menu-item>
        </el-menu>
      </el-col>
    </el-row> -->
    <ul>
      <li>
        <div class="demo-image">
          <div class="block" :key="fit">
            <el-image
              style="
                width: 60px;
                height: 60px;
                margin-top: 45px;
                margin-left: 2px;
              "
              :src="url"
              :fit="fit"
            ></el-image>
          </div>
        </div>
      </li>
      <li>
        <i class="iconfont icon-gongzuotai" style="font-size: 15px"></i>
        <span>工作台</span>
      </li>
      <li style="margin-left: -6px">
        <i class="el-icon-star-on" style="font-size: 22px"></i>
        <span>收藏夹</span>
      </li>
      <li style="margin-left: -4px">
        <i class="el-icon-lock" style="font-size: 18px"></i>
        <span>已锁定</span>
      </li>
      <li style="margin-left: -4px">
        <i class="iconfont icon-huishouzhan1" style="font-size: 18px"></i>
        <span>回收站</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "Aside",
  data() {
    return {
      isCollapse: true,
      fits: ["fill"],
      url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
@import "../assets/icon/iconfont.css";
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.s {
  position: absolute;
  left: 100px;
}
ul {
  overflow: hidden;
  margin-left:180px;
}
ul li {
  margin-top: 10px;
  list-style: none;
  color: white;
  font-size:14px;
  margin-bottom:40px;
}
</style>
